<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ __('Meeting booking') }}</title>
   <script src="{{ 'vendor/scheduler/dhtmlxscheduler.js' }}"></script>
   <script src="{{ 'vendor/scheduler/ext/dhtmlxscheduler_minical.js' }}"></script>
   <script src="{{ 'vendor/scheduler/ext/dhtmlxscheduler_collision.js' }}"></script>
   <script src="{{ 'vendor/scheduler/sources/locale/locale_cn.js' }}" charset="utf-8"></script>
   <script src="{{ asset('js/app.js') }}"></script>
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
   <link href="{{ 'vendor/scheduler/dhtmlxscheduler.css' }}" rel="stylesheet">

   <style type="text/css">
       html, body{
           height:100%;
           padding:0;
           margin:0;
           overflow: hidden;
       }
       .meeting-room select {
           width: 150px;
           height: 30px;
       }
   </style>
</head>
<body>
@include('partials.header', compact('slogan'))
<p></p>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
   <div class="dhx_cal_navline">
       <div class="dhx_cal_prev_button"></div>
       <div class="dhx_cal_next_button"></div>
       <div class="dhx_cal_today_button"></div>
       <div class="btn btn-primary" style="right: 220px;" onclick="addNewEv()">{{ __('Create') }}</div>
       <div class="meeting-room" style="right: 300px;">
           <select name="room" id="meeting-room">
               @foreach(\App\Models\MeetingRoom::ROOM_OPTION as $val)
               <option value="{{ $val['key'] }}" @if($room == $val['key']) selected @endif>{{ $val['label'] }}</option>
               @endforeach
           </select>
       </div>
       <div class="dhx_cal_date"></div>
       <div class="dhx_cal_tab" name="day_tab"></div>
       <div class="dhx_cal_tab" name="week_tab"></div>
       <div class="dhx_cal_tab" name="month_tab"></div>
   </div>
   <div class="dhx_cal_header"></div>
   <div class="dhx_cal_data"></div>
</div>

<script type="text/javascript">
    @guest
    var userId = null;
    scheduler.config.readonly = true;
    scheduler.config.readonly_form = true;
    @endguest

    @auth
    var userId = {{ $user->id }};
    @endauth

    scheduler.config.xml_date = "%Y-%m-%d %H:%i:%s";
    scheduler.config.first_hour = 8;
    scheduler.config.last_hour = 20;
    scheduler.config.time_step = 10;
    scheduler.config.details_on_create = true;
    scheduler.config.icons_select = ["icon_details","icon_delete"];

    scheduler.config.lightbox.sections={!! $lightboxSections !!};
    scheduler.setLoadMode("day");

    scheduler.init("scheduler_here", new Date(), "week");

    // 过期或非本人创建任务，禁用拖曳
    scheduler.attachEvent("onBeforeDrag", function(id){
        let ev = this.getEvent(id);
        var isValid = false;
        if (ev) {
            let endDate = ev.end_date;
            isValid = (new Date(Date.parse(endDate))) > (new Date())
        }

        return isValid && (ev.create_user_id === userId);
    });

    // 过期或非本人创建任务，禁用单击及左侧工具栏
    scheduler.attachEvent("onClick", function(id){
        let ev = this.getEvent(id);
        var isValid = false;
        if (ev) {
            let endDate = ev.end_date;
            isValid = (new Date(Date.parse(endDate))) > (new Date())
        }

        return isValid && (ev.create_user_id === userId);
    });

    // 过期或非本人创建任务，禁用双击
    scheduler.attachEvent("onDblClick", function(id){
        checkLogin();
        let ev = this.getEvent(id);
        var isValid = false;
        if (ev) {
            let endDate = ev.end_date;
            isValid = (new Date(Date.parse(endDate))) > (new Date())
        }

        return isValid && (ev.create_user_id === userId);
    });

    scheduler.load("/api/meeting?room=" + {{ $room }}, "json");
    let dp = new dataProcessor("/api/meeting");
    dp.init(scheduler);
    dp.setTransactionMode("REST");

    // title上显示创建者
    scheduler.templates.event_header = function(start,end,ev){
        let creator = ev.user ? ' (' + ev.user.name + ')' : '';
        return scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end) + creator;
    };

    // 错误提示
    scheduler.attachEvent("onSaveError", function(ids, res){
        if (res.status === 403) {
            checkLogin();
            return false;
        }
        if (res.status = 422) {
            let response = res.response;
            dhtmlx.alert(JSON.parse(response).message);
            scheduler.deleteEvent(ids);
            return false;
        }
        scheduler.deleteEvent(ids);
        dhtmlx.alert(res.statusText);
    });

    scheduler.attachEvent("onEventCollision", function(ev, evs){
        dhtmlx.alert('时间冲突');
        return true;
    });

    // 添加前 adding
    scheduler.attachEvent("onEventSave",function(id,ev){
        if (!ev.text) {
            alert("Text must not be empty");
            return false;
        }
        return true;
    });

    // 添加后 added
    scheduler.attachEvent("onEventAdded",function(id,ev){
        scheduler.clearAll();
        scheduler.load("/api/meeting?room=" + {{ $room }}, "json");
    });

    function addNewEv(){
        checkLogin();
        scheduler.addEventNow();
    }
    
    function checkLogin() {
        if (!userId) {
            alert('请先登录！');
            window.location.href = '/login';
        }
    }

    document.getElementById('meeting-room').addEventListener('change', function () {
        window.location.href = '/meeting?room=' + this.value;
    });
</script>
</body>